// 首页逻辑实现
/*
    token 解释

    就是我们的程序员发发明了一种字符串的加密方式
    这种方式是可逆

    会把用户的信息进行加密  这个加密过程在后端进行
    当你登录成功以后给你返回 返回的这个就是 token

    token:

    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
    .eyJpZCI6OCwiaWF0IjoxNjUwODc2ODk2LCJleHAiOjE2NTA4ODA0OTZ9
    .F1aXnU3pPrKdMpMcJgFsRf44lN_qeG4wNpVxSpGWsNA"
*/


// 获取元素
const offBtn = document.querySelector('.off')
const onBtn = document.querySelector('.on')
const btn = document.querySelector('button')

// 首先获取到用户的token 和 id
let token = window.localStorage.getItem('token')
let id = window.localStorage.getItem('id') - 0
// console.log(id);

// 设计一个函数
setList()
function setList() {
    // 判断我现在是不是处于登录状态
    if (!token || !id) {
        // 让off盒子显示 让on盒子隐藏
        offBtn.classList.add('active')
        onBtn.classList.remove('active')
        return
    }

    // 代码能来到这里 说明我曾经登录过
    // 不能保证我现在一定是处于登录状态
    // 也不能保证我的token 在有限期内
    // 需要发送请求验证

    const xhr = new XMLHttpRequest()
    xhr.open('GET', `http://localhost:8888/users/info?id=${id}`)
    xhr.onload = () => {
        let res = JSON.parse(xhr.responseText)
        console.log(res);
        if (res.code !== 1) {
            // 让off盒子显示 让on盒子隐藏
            offBtn.classList.add('active')
            onBtn.classList.remove('active')
            return
        }

        // 代码能执行到这里 说明真的是现在处于登录状态
        offBtn.classList.remove('active')
        onBtn.classList.add('active')
        onBtn.firstElementChild.innerText = res.info.nickname
    }
    xhr.setRequestHeader('authorization', token)
    xhr.send()
}

// 退出登录
// 给button添加一个点击事件
// btn.addEventListener('click', async () => {
//     let res = await pAjax({
//         url: 'http://localhost:8888/users/logout',
//         data: { id },
//         datatype: 'json'
//     })
//     console.log(res);

//     // 删除掉本地的id和token
//     window.localStorage.removeItem('id')
//     window.localStorage.removeItem('token')
//     window.location.href = './login.html'
// }) 